<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<link th:href="@{/ajax/libs/jquery-layout/jquery.layout-latest.css}" rel="stylesheet"/>
<link rel="stylesheet" href="/static/ajax/libs/summernote/summernote.css"
      th:href="@{/ajax/libs/summernote/summernote.css}">
<link rel="stylesheet" href="/static/ajax/libs/bootstrap-tags-input/bootstrap-tagsinput.css"
      th:href="@{/ajax/libs/bootstrap-tags-input/bootstrap-tagsinput.css}">
<style>
    .linksDetails li {
        margin-top: 10px;
    }
</style>
<body class="gray-bg">
<div class="ui-layout-west">
    <div class="main-content">
        <div class="box box-main">
            <div class="box-header">
                <div class="box-title">
                    <i class="fa icon-grid"></i> 博客概览
                </div>
                <div class="box-tools pull-right">
                    <button type="button" class="btn btn-box-tool" id="btnRefresh" title="刷新列表">
                        <i class="fa fa-refresh"></i></button>
                </div>
            </div>
            <div class="ui-layout-content">
                <form id="blogUpdateForm">
                    <input type="hidden" name="blogId" th:value="${blog.blogId}">
                    <input type="hidden" id="blogContentInit" th:value="${blog.content}">
                    <div class="form-group">
                        <label class="control-label">封面:</label>
                        <img src="/img/blog-default.png" width="100%" onclick="changeImg()"
                             height="150px" id="header" name="headerImg" title="点击图片更换标图" th:src="${blog.headerImg}"/>
                    </div>
                    <div class="form-group">
                        <label class=" control-label">标题:</label>
                        <div class="">
                            <input type="text" class="form-control" name="title" placeholder="在这里输入标题"
                                   th:value="${blog.title}">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class=" control-label">摘要:</label>
                        <div class="">
                            <input type="text" class="form-control" name="summary" placeholder="在这里输入摘要"
                                   th:value="${blog.summary}">
                            <span class="help-block m-b-none">
                                    <i class="fa fa-info-circle"></i> 留空则默认为博文前150字节为博文的摘要</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class=" control-label">标签:</label>
                        <div class="">
                            <input id="tags" name="tags" class="form-control col-sm-12" data-role="tagsinput"
                                   type="text"
                                   style=" min-width: 100%;"
                                   placeholder="按回车确定  ">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class=" control-label">权重:</label>
                        <div class="">
                            <input name="weight" class="form-control" type="text" value="0" placeholder="在这里输入权重"
                                   th:value="${blog.weight}">
                            <span class="help-block m-b-none">
                                <i class="fa fa-info-circle"></i> 前台首页展示会以权重作为排序标准</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class=" control-label">分类:</label>
                        <div class="">
                            <div class="input-group" style="width: 100%">
                                <select name="categoryId" class="form-control m-b">
                                    <option value="">请选择分类</option>
                                    <option th:each="category : ${categories}"
                                            th:text="${category.categoryTitle}"
                                            th:value="${category.categoryId}"
                                            th:field="*{blog.categoryId}">
                                    </option>
                                </select>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="container-div ui-layout-center">
    <div class="row">
        <div class="mail-box-header">
            <div class="pull-right tooltip-demo">
                <a class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="top"
                   onclick="editOrPreview(this)" title="预览"><i class="fa fa-pencil"></i> 预览</a>
                <a class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="top"
                   onclick="uploadMd()" title="上传MD文件"><i class="fa fa-pencil"></i> 上传</a>
            </div>
            <h2>
                博客内容
            </h2>
        </div>
        <div class="mail-box">
            <div class="mail-body">
                <div id="summernote" class="summernote"></div>
                <div class="clearfix"></div>
            </div>
            <div class="mail-body text-right tooltip-demo">
                <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i
                        class="fa fa-check"></i>保 存
                </button>&nbsp;
                <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i
                        class="fa fa-reply-all"></i>关 闭
                </button>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>

<div th:include="include :: footer"></div>
<script src="/static/ajax/libs/summernote/summernote.min.js"
        th:src="@{/ajax/libs/summernote/summernote.min.js}"></script>
<script src="/static/ajax/libs/summernote/summernote-zh-CN.js"
        th:src="@{/ajax/libs/summernote/summernote-zh-CN.js}"></script>
<script src="/static/ajax/libs/summernote/summernote-ext-highlignt.js"
        th:src="@{/ajax/libs/summernote/summernote-ext-highlignt.js}"></script>
<script src="/static/ajax/libs/summernote/summernote-add-class.js"
        th:src="@{/ajax/libs/summernote/summernote-add-class.js}"></script>
<script src="/static/ajax/libs/bootstrap-tags-input/bootstrap-tagsinput.min.js"
        th:src="@{/ajax/libs/bootstrap-tags-input/bootstrap-tagsinput.min.js}"></script>
<script th:src="@{/ajax/libs/jquery-layout/jquery.layout-latest.js}"></script>
<script src="/static/ajax/libs/summernote/mySummernote.js" th:src="@{/ajax/libs/summernote/mySummernote.js}"></script>
<script th:inline="javascript">
    var tags = [[${blog.tags}]];
    $(function () {
        //添加已有标签
        if (tags != null) {
            $("#tags").tagsinput('add', tags.join(","));
        }
    });
</script>
<script>
    function submitHandler() {
        $.operate.saveTabPut("/blog/blog/edit", getData());
    }

    $(function () {
        $("#summernote").summernote("code", $("#blogContentInit").val());
        $("#blogUpdateForm").formValidate({
            rules: {
                headerImg: {
                    required: true,
                },
                title: {
                    required: true,
                    rangelength: [2, 45]
                },
                summary: {
                    maxlength: 200
                },
                weight: {
                    required: true,
                    number: true
                },
                categoryId: {
                    required: true
                },
            },
            messages: {
                "headerImg": {
                    required: "请选择预览图",
                },
                "title": {
                    required: "请输入标题",
                    rangelength: "请输入长度为 {0} 至 {1} 之间的标题"
                },
                "summary": {
                    maxlength: "最多输入{0}个字符"
                },
                "weight": {
                    required: "请输入权重",
                    rangelength: "请输入正确格式的权重"
                },
                "tags": {
                    required: "请输入标签",
                    rangelength: "请输入长度为 {0} 至 {1} 之间的标签"
                },
                "categoryId": {
                    required: "请选择分类",
                },
            },
        });
        var panehHidden = false;
        if ($(this).width() < 769) {
            panehHidden = true;
        }
        //初始化分栏
        $('body').layout({initClosed: panehHidden, west__size: 350});
    });

    function changeImg() {
        var title = "上传图片";
        var url = "/blog/blog/img";
        var width = $(window).width() / 1.5;
        var height = $(window).height() / 1.2;
        //如果是移动端，就使用自适应大小弹窗
        if (navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)) {
            width = 'auto';
            height = 'auto';
        }
        if ($.common.isEmpty(title)) {
            title = false;
        }
        if ($.common.isEmpty(url)) {
            url = "/404.html";
        }
        if ($.common.isEmpty(width)) {
            width = 800;
        }
        if ($.common.isEmpty(height)) {
            height = ($(window).height() - 50);
        }
        layer.open({
            type: 2,
            area: [width + 'px', height + 'px'],
            fix: false,
            //不固定
            maxmin: true,
            shade: 0.3,
            title: title,
            content: url,
            btn: ['<i class="fa fa-check"></i> 确认', '<i class="fa fa-close"></i> 关闭'],
            // 弹层外区域关闭
            shadeClose: true,
            yes: function (index, layero) {
                var iframeWin = layero.find('iframe')[0];
                var data = iframeWin.contentWindow.submitHandler();
                $("#header").attr("src", data);
                iframeWin.contentWindow.closeLocal();
            },
            cancel: function (index) {
                return true;
            }
        });
    }

    //获取表单数据
    function getData() {
        var blogId = $("input[name='blogId']").val();
        var headerUrl = $("#header")[0].src;
        var title = $("input[name='title']").val();
        var summary = $("input[name='summary']").val();
        var tags = $("#tags").val();
        var weight = $("input[name='weight']").val();
        var categoryId = $("select[name='categoryId']").val();
        var content = $("#summernote").summernote("code");
        var tagsArray = new Array();
        var data = {
            headerImg: headerUrl,
            title: title,
            summary: summary,
            tags: tags,
            categoryId: categoryId,
            weight: weight,
            content: content,
            blogId: blogId
        }
        return data;
    }
</script>
</body>

</html>